import './index.scss'
import { Tabs } from 'antd-mobile'
import image from '../../img/11.png'
import { useState } from 'react'
import shai from '../../img/shai.png'
import { useLocation } from 'react-router-dom'
const Advance = () => {
    const tabItems = [
        { key: 'default', title: '全部' },
        { key: 'time', title: '代付款' },
        { key: 'remark', title: '待收货' },
        { key: 'price', title: '待评价' },
        { key: 'filter', title: '筛选' }
    ]
    const [activeIndex, setActiveIndex] = useState(0)
    const location = useLocation()
    console.log(location);
    // const { cartList, }

    const changekeyfn = (key) => {

        const index = tabItems.findIndex(item => item.key === key)
        setActiveIndex(index)

    }
    return <div className="Advance">
        <div className="Advance-header">


            <div className='payment'> <span className='img-order1'>＞</span>填写订单</div>

            <div className='pay-title' >
                <Tabs tyle={{
                    '--title-font-size': '13px', '--active-line-color': '#ce4436',
                    '--active-title-color': '#ce4436'
                }} activeKey={tabItems[activeIndex].key}
                    onChange={changekeyfn}>
                    {tabItems.map(item => <Tabs.Tab title={item.title} key={item.key}>
                        {/* <div className='productAll'>
                            <div className='wrapper'>
                                {allList.map((item, index) => <div className='subItem' key={index}>
                                    <div className='image'><img src={item.picUrl} alt="" /></div>
                                    <div className='subTitle'>{item.disPrdName}</div>
                                    <div className='submi'>{item.prdBriefName}</div>
                                    <div className='product'>￥{item.price}</div>
                                </div>
                                )}
                            </div>
                            <div className='dixian'>
                                {text && !end ? <div className='front'>-加载中-</div> : ''}
                            </div>
                            <div className='dixian'>
                                {end ? <div className='front'>-我是有底线的-</div> : ''}
                            </div>
                        </div> */}
                    </Tabs.Tab>)}
                </Tabs>
                <div className='ac'><img src={shai} alt="" /></div>
            </div>
            <div className='pay-cart'>
                <div className='order-num'><div>订单编号</div><div className='pay-ac'>代付款</div></div>
                <div className='order-shopping'>
                    <div className='card-image'><img src={image} alt="" /></div>
                    <div className='order-card-title'>  <div className='card-title1'><span>荣耀X40 GT 8GB+128GB 竞速黑 双卡 全网通版</span><span>￥3762</span></div>
                        <div className='card-title2'>竞速黑 5G全网通 8GB+128GB<span className='pay-cardnum'>×1</span></div></div>

                </div>
                <div className='pay-allprice'><div>共一件商品</div><div>总合计为48282</div></div>
                <div className='order-price'> <div>应付￥998</div> <div>取消订单</div><div>付款倒计时</div></div>
            </div>
        </div>

    </div>
}
export default Advance